/*
 * @Author: lisen sen.li@doone.com.cn
 * @Date: 2022-10-29 15:38:34
 * @LastEditors: lisen sen.li@doone.com.cn
 * @LastEditTime: 2022-10-29 16:04:25
 * @FilePath: \demo\handler.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
let width = 200
let height = 600
const svg = d3.select("#svg")
    .attr("viewBox", [0, 0, width, height])
    .attr('width', width)
    .attr('height', height)

const g = svg.append("g")

// console.log(g.selectAll("circle"))

g.selectAll("circle")
    .data(getData())
    .join("circle")
    .attr("cx", ({x}) => x)
    .attr("cy", ({y}) => y)
    .attr("r", 10)
    .attr("fill", ({color})=>color)
    .on('click', (_, {id}) => onClick(id))


g.selectAll("text")
    .data(getData())
    .join("text")
    .attr("x", ({x,l}) => x+((l%2===0)?-20:20))
    .attr("y", ({y,l}) => y-20)
    .text(({tag}) => tag)
    .attr('style', 'writing-mode:tb;')
    .attr("fill", 'green')

svg.call(d3.zoom()
    .extent([[0, 0], [width, height]])
    .scaleExtent([1, 8])
    .on("zoom", zoomed))

function zoomed({transform}) {
    g.attr("transform", transform);
}

function getData() {
    return [
        {x:120, y:45, id:1,  tag:'A603', color:'red', l: 1},
        {x:120, y:90, id:2,  tag:'A604', color:'green',l: 1},
        {x:120, y:135, id:3, tag:'A605', color:'blue',l: 1},
        {x:60, y:45, id:1,  tag:'A603', color:'red',   l: 2},
        {x:60, y:90, id:2,  tag:'A604', color:'green', l: 2},
        {x:60, y:135, id:3, tag:'A605', color:'blue',  l: 2},
    ]    
}


function onClick(id) {
    console.log('id', id)
}
